<template>
	<view>
		<view class="cart-container">
			<view style="display: inline-block;margin-left: 20rpx;">购物车</view>
			<view style="float: right;margin-right: 20rpx;">{{AWYnumber}}件</view>
		</view>
		<view>
			<!-- 购买的商品 -->
			<view>
				<view class="cart-meun" v-for="(item,index) in cartlist" :key="index"
					:style="'left:'+cartLeft[index]+'px;'" @touchstart="moveStart(index,$event)"
					@touchmove="Moving(index,$event)" @touchend="Movecancel(index,$event)">
					<image :src="item.guoxuan==true?'../../static/images/gou-red.png':'../../static/images/gou.png'"
						class="danguo" @tap="guoxuan(index,$event)" :data-guoxuan="item.guoxuan"></image>
					<image :src="item.imgs" style="width: 100px;height: 100px;float: left;margin-right: 10px;">
					</image>
					<view style="width: 240px;height: 100px;float: left;">
						<view style="margin-top: 10px;">{{item.txts}}</view>
						<view class="pics">￥{{item.pic}}</view>
						<view class="adds">
							<button size="mini" @tap="jianshao(index)" class="jianshao">-</button>
							<input :value="item.number"
								style="width:30px;height:100%;display:inline-block;text-align: center;" />
							<button size="mini" class="addnum" @tap="adds(index)">+</button>
						</view>
					</view>
					<view class=" deletes" @tap="CartDelete(index)">
						<view>删除</view>
					</view>
				</view>
			</view>
			<!-- 结算 -->
			<view class="cart-arry">
				<view style="display: inline-block;">
					<image :src="guoquanxuan==true? '../../static/images/gou-red.png':'../../static/images/gou.png'"
						class="gouimgs" @tap="quanxuan(index)" >
					</image>
					<view style="display: inline-block;">全选</view>
				</view>

				<view class="jiesuan">去结算</view>
				<view class="arry">合计：￥{{alwaypic}}</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cartlist: [{
					guoxuan: false,
					imgs: "../../static/images/goods/1.jpg",
					txts: "御泥坊清润萤亮",
					pic: "455",
					number: 1
				}, {
					guoxuan: false,
					imgs: "../../static/images/goods/2.jpg",
					txts: "御泥坊美白嫩肤",
					pic: "455",
					number: 1
				}, {
					guoxuan: false,
					imgs: "../../static/images/goods/3.jpg",
					txts: "御泥坊",
					pic: "455",
					number: 1
				}, {
					guoxuan: false,
					imgs: "../../static/images/goods/4.jpg",
					txts: "御泥坊",
					pic: "455",
					number: 1
				}],
				num:0,
				index: '',
				cartIndex: '', //删除后的数据
				cartLeft: [0, 0, 0, 0], //向左移动的距离
				cartStart: [0, 0, 0, 0], //向左移动的初始距离
				 alwaypic:0,
				guoquanxuan: false,
				goured: "../../images/images/gou-red.png",
				gou: "../../images/images/gou.png"
			}
		},
		created() {
			this.allpic()
		},
		computed:{
			AWYnumber(){
				return this.num=this.cartlist.length
			}
		},
		methods: {
			moveStart(msg, event) { //开始移动
				let leftX = event.touches[0].pageX; //拼接字符串---对应下标的向左移动的初始距离
				this.cartStart.splice(msg, 1, leftX)
			},
			Moving(msg, event) { //移动中
				let leftX = event.touches[0].pageX; //拼接字符串---对应下标的向左移动的初始距离
				let lens = event.changedTouches[0].pageX - this.cartStart[msg]; //当前移动的距离减去当前向左移动的初始距离 
			},
			Movecancel(msg, event) { //移动结束
				let lens = event.changedTouches[0].pageX - this.cartStart[msg]; //当前移动的距离减去当前向左移动的初始距离 
				if (lens < -90) {
					lens = -90
				} else {
					lens = 0
				}
				this.cartLeft.splice(msg, 1, lens) //替换
			},
			// 单选
			guoxuan(index, event) {
				console.log(event)
				this.cartlist[index].guoxuan=!event.currentTarget.dataset.guoxuan
				let lens = 0
				this.cartlist.find(function(item){
					// console.log(item)
					if(item.guoxuan){
						lens++
					}
				})
				if(lens==this.cartlist.length){
					this.guoquanxuan=true
				}else{
					this.guoquanxuan=false
				}
				this.allpic()
			},
			// 全选
			quanxuan(index){
				console.log(index)
				this.guoquanxuan=!this.guoquanxuan
				if(this.guoquanxuan){
					this.cartlist.find(function(item){
						item.guoxuan=true
					})
				}else{
					this.cartlist.find(function(item){
						item.guoxuan=false
					})
				}
				this.allpic()
			},
			allpic(){
				let awy=0
				this.alwaypic=0
				this.cartlist.find(function(item){
					console.log(item)
					if(item.guoxuan==true){
						 awy +=(item.pic)*(item.number)
					}
				})
				 this.alwaypic=awy
			},
			// 减少数量
			jianshao(index){
				console.log(index)
				this.cartlist[index].number
				if(this.cartlist[index].number<2){
					this.cartlist[index].number=1
				}else{
					this.cartlist[index].number--
				}
				this.allpic()
			},
			// 增加数量
			adds(index){
				console.log(index)
				this.cartlist[index].number++
				this.allpic()
			},
			// 删除商品
			CartDelete(index){
					this.cartlist.splice(index,1)
					this.allpic()
			}
			
		}
	}
</script>

<style scoped>
	.cart-container {
		border-bottom: #C0C0C0 1px solid;
	}

	.cart-meun {
		width: 450px;
		height: 125px;
		position: relative;
		left: 0;
		margin-top: 15px;
		margin-left: 15px;
		border-bottom: rgb(133, 97, 97) 1rpx solid;
	}

	/* 单价 */
	.pics {
		color: red;
	}

	/* 单向选择 */
	.danguo {
		width: 20px;
		height: 20px;
		margin: 40px 5px;
		float: left;
	}

	/* 删除 */
	.deletes {
		width: 50px;
		height: 100%;
		text-align: center;
		line-height: 230rpx;
		background-color: red;
		float: right;
	}
	/* 减少数量 */
	.jianshao {
	    float: left;
	    background-color: rgb(233, 230, 229);
	}
	
	/* 增加数量 */
	.addnum {
	    float: right;
	    background-color: rgb(223, 222, 222);
	}
	
	/* 底部结算 */
	.cart-arry {
	    width: 100%;
	    height: 80rpx;
	    line-height: 80rpx;
	    font-size: 25rpx;
	    background-color: rgba(223, 219, 220, 0.527);
	    position: fixed;
	    bottom: 0rpx;
	    z-index: 999;
	    background-color: rgba(223, 219, 220);
	}
	
	/* 计数器 */
	.adds {
	    width: 230rpx;
	    height: 60rpx;
	    background-color: seashell;
	    border: rgb(224, 227, 228) 1rpx solid;
	    box-sizing: content-box;
	    display: inline-block;
	    margin-left: 80rpx;
	    margin-top: 30rpx;
	}
	
	/* 价钱 */
	.pics {
	    color: red;
	    margin-top: 50rpx;
	    float: left;
	}
	
	.gouimgs {
	    width: 30rpx;
	    height: 30rpx;
	    display: inline-block;
	    margin-top: 20rpx;
	    margin-left: 30rpx;
	    margin-right: 20rpx;
	}
	
	.jiesuan {
	    width: 130rpx;
	    height: 100%;
	    background-color: red;
	    color: white;
	    text-align: center;
	    line-height: 80rpx;
	    float: right;
	}
	
	.arry {
	    float: right;
	    color: red;
	}
</style>
